<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 800px;
			}

			img {
				width: 150px;
			}

			th,
			td {
				text-align: center;
			}


			input {
				width: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" align="center">
			<thead>
				<tr>
					<th>
						<input type="checkbox">全选
					</th>
					<th>商品名称</th>
					<th>商品图片</th>
					<th>商品单价</th>
					<th>购买数量</th>
					<th>商品合计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<tr>
					<td colspan="7" style="text-align: right;">
						<span>总计：</span>
						<span id="allTotal">10</span>
					</td>
				</tr>
			</tfoot>
		</table>
		<script type="text/javascript">
			//初始化准备一个商品对象数组 ，里面有三个具体的商品
			var goodses = [{
				name: "iPhone 13",
				img: "https://img10.360buyimg.com/n7/jfs/t1/216578/34/14150/121785/62286978E1a6f4ef0/b6b32191c26d161b.jpg",
				price: 5299,
				count: 1,
				isck: false
			}, {
				name: "Redmi K40S",
				img: "https://img13.360buyimg.com/n7/jfs/t1/147659/25/25288/269744/623321a5E41c70e55/be821910e1a6180e.jpg",
				price: 1999,
				count: 1,
				isck: false
			}, {
				name: "荣耀70",
				img: "https://img13.360buyimg.com/n7/jfs/t1/179091/36/28087/35197/632873cbE8079c6b0/d6f86f1b1d5f112d.jpg",
				price: 1999,
				count: 1,
				isck: false
			}]
			// 动态生成商品数据行
			goodses.forEach(g => {
				var tr = document.createElement("tr");
				//接下来穿件7个td
				//第一个td 复选框
				var td1 = document.createElement("td");
				var input = document.createElement("input");
				input.type = "checkbox";
				td1.appendChild(input);
				tr.appendChild(td1);

				//第二个td 显示商品名
				var td2 = document.createElement("td");
				td2.innerHTML = g.name;
				tr.appendChild(td2);

				//第三个td 显示图片
				var td3 = document.createElement("td");
				var img = document.createElement("img");
				img.src = g.img;
				td3.appendChild(img);
				tr.appendChild(td3)

				//第四个td 显示商品价格
				var td4 = document.createElement("td");
				td4.innerHTML = g.price.toFixed(2);
				tr.appendChild(td4);

				//第五个td 显示购买数量
				var td5 = document.createElement("td");
				// 减
				var minusBtn = document.createElement("button");
				minusBtn.innerHTML = "-";
				minusBtn.onclick = function() {
					g.count--;
					if (g.count === 0) g.count = 1;
					count.value = g.count;
					td6.innerHTML = "￥" + (g.price * g.count).toFixed(2);
					allTotal();
				}
				td5.appendChild(minusBtn);

				//输入框
				var count = document.createElement("input");
				count.value = g.count;
				count.readOnly = "readOnly";
				td5.appendChild(count);


				// 加
				var plusBtn = document.createElement("button");
				plusBtn.innerHTML = "+";
				plusBtn.onclick = function() {
					g.count++;
					count.value = g.count;
					td6.innerHTML = "￥" + (g.price * g.count).toFixed(2);
					allTotal();
				}
				td5.appendChild(plusBtn);
				tr.appendChild(td5);


				//第六个td 显示商品合计
				var td6 = document.createElement("td");
				td6.innerHTML = "￥" + (g.count * g.price).toFixed(2);
				td6.style.width = "100px";
				tr.appendChild(td6);


				//第七个td 显示删除按钮
				var td7 = document.createElement("td");
				var btn = document.createElement("button");
				btn.innerHTML = "删除";
				btn.onclick = function() {
					var index = goodses.findIndex(f => f.name == g.name);
					goodses.splice(index, 1)
					tr.remove();
					allTotal();
				}
				td7.appendChild(btn);
				tr.appendChild(td7);
				//临时 td8 获取每个元素在数组中的索引位置
				// var td8 = document.createElement("td");
				// var index = td8.innerHTML = goodses.indexOf(g);
				// tr.append(td8);


				document.querySelector("tbody").appendChild(tr);
			});

			//计算所有商品总计
			function allTotal() {
				var sum = 0;
				goodses.forEach(g => {
					sum += g.price * g.count;
				})
				document.querySelector("#allTotal").innerHTML = "￥" + sum.toFixed(2);
			}
			allTotal();

			document.querySelector("#checkAll").onchange = function() {
				document.querySelectorAll(".ck").forEach(ck => )
			}
		</script>
	</body>
</html>
